<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渲染表格</title>
    <style>
      table,th,td{
        border:1px solid lightblue;
   }
      table{
         width: 100%;
         border-collapse:collapse;
   }
    th,td{
        height: 30px;
    }
     tbody tr:hover{
        background-color:yellow!important;
    }
    tbody tr:nth-child(2n+1){
        background-color:#ccc;
    }
    </style>
</head>
<body>
     <table>
       <thead>
         <tr>
             <th>用户名</th>
             <th>姓名</th>
             <th>年龄</th>
             <th>性别</th>
             <th>手机号</th>
             <th>操作</th>
         </tr>
       </thead>
       <tbody>
              <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
              <td>6</td>
            </tr>
       </tbody>
     </table>
    <script>
       var jsonObj={
               "success":true,
               "errorCode":0,
               "data":{
                   "total":100,
                   "list":[
                            {"id":1,"username":"A001","name":"张三","age":20,"gender":"男","moblie":"13912345678",'deleteBtn':'<button>删除</button>'},
                            {"id":2,"username":"B002","name":"李四","age":40,"gender":"男","moblie":"13912345678",'deleteBtn':'<button>删除</button>'},
                            {"id":3,"username":"C003","name":"小乔","age":21,"gender":"女","moblie":"13912785678",'deleteBtn':'<button>删除</button>'},
                            {"id":4,"username":"D004","name":"关羽","age":80,"gender":"男","moblie":"13752345678",'deleteBtn':'<button>删除</button>'},
                            {"id":5,"username":"E005","name":"刘备","age":60,"gender":"男","moblie":"13812345678",'deleteBtn':'<button>删除</button>'},
                            {"id":6,"username":"F006","name":"甄姬","age":30,"gender":"女","moblie":"13612345678",'deleteBtn':'<button>删除</button>'},
                            {"id":7,"username":"G007","name":"虞姬","age":15,"gender":"女","moblie":"13512345678",'deleteBtn':'<button>删除</button>'},
                            {"id":8,"username":"H008","name":"达摩","age":35,"gender":"男","moblie":"13426345678",'deleteBtn':'<button>删除</button>'},
                            {"id":9,"username":"I009","name":"赵云","age":40,"gender":"男","moblie":"13916665678",'deleteBtn':'<button>删除</button>'},
                            {"id":0,"username":"J000","name":"大乔","age":28,"gender":"女","moblie":"13232345678",'deleteBtn':'<button>删除</button>'},
                   ]

               }
       }
//函数的第一行声明所有变量;response=jsonboj的内容,函数可以访问作用域外的东西本级没有就找父级，所以函数能访问到jsonobj里的对象
            var render = function(response){
                var table = document.querySelector('table');
                var trStr = '';
                var i ;
                var data = response.data;//(拿到函数response中的data)
                var list = data.list;//(//拿到data下的list)
                var total =data.total;//(拿到data下的total)
                var len = list.length;
                var name;
                var index;
                for(var i =0;i<len;i++){ //设置自定义属性让属性值等于i(0~9)
                    trStr +='<tr data-index=' + i + '>'+
                              '<td>' +list[i].username+ '</td>'+
                              '<td>' +list[i].name+'</td>'+
                              '<td>' +list[i].age+'</td>'+
                              '<td>' +list[i].gender+'</td>'+
                              '<td>' +list[i].moblie+'</td>'+
                              '<td>' +list[i].deleteBtn+'</td>'+
                            '</tr>';
                } 
               
                table.getElementsByTagName('tbody')[0].innerHTML = trStr;
               
                for (var i = 0; i < len; i++) {  //for循环给table里所有的btn绑点击事件
                    table.getElementsByTagName('button')[i].onclick = function(e){ //e事件对象
                        index = e.target.parentNode.parentNode.getAttribute('data-index')//e.target得到触发事件对象的元素
                        name = data.list[index].name
                        alert('是否删除'+name)
                    }
                }
            }

            render(jsonObj);
           

    </script>
</body>
</html>